<template>
  <div>
    <CateGory :disabled="show !== 1" />
    <SpuList v-if="show === 1" @showForm="changeShow" />
    <SpuForm v-if="show === 2" :showId="showId" @showForm="changeShow" />
    <SkuForm v-if="show === 3" :showId="showId" @showForm="changeShow" />
  </div>
</template>

<script setup lang="ts">
import CateGory from '@/components/Category/index.vue'
import SpuList from '@/views/Product/Spu/SpuList/index.vue'
import SpuForm from '@/views/Product/Spu/SpuForm/index.vue'
import SkuForm from '@/views/Product/Spu/SkuForm/index.vue'
import { ref } from 'vue'

const show = ref(1)
const showId = ref<number | string>('')
const changeShow = (state: number, id?: number) => {
  show.value = state
  showId.value = ''
  if (id) {
    showId.value = id
  }
}
</script>
<script lang="ts">
export default {
  name: 'SpuView'
}
</script>

<style scoped lang="scss"></style>
